<template>
	<view class="container">
		<view class="form-item">
			<text class="label">姓名：</text>
			<input 
				class="input"
				placeholder="请输入姓名"
				v-model="name"
				placeholder-class="placeholder"
			/>
		</view>
		
		<view class="form-item">
			<text class="label">性别：</text>
			<radio-group @change="radioChange">
				<radio value="1" :checked="sex===1?true:false">男</radio>
				<radio value="0" :checked="sex===0?true:false">女</radio>
			</radio-group>
		</view>
		
		<view class="form-item">
			<text class="label">年龄：</text>
			<input 
				class="input"
				placeholder="请输入年龄"
				v-model="age"
				type="number"
				placeholder-class="placeholder"
			/>
		</view>

		<view class="form-item">
			<text class="label">邮箱：</text>
			<input 
				class="input"
				placeholder="请输入邮箱"
				v-model="email"
				placeholder-class="placeholder"
				@blur="validateEmail"
			/>
		</view>

		<view class="form-item">
			<text class="label">联系电话：</text>
			<input 
				class="input"
				placeholder="请输入联系电话"
				v-model="phone"
				type="number"
				maxlength="11"
				placeholder-class="placeholder"
				@blur="validatePhone"
			/>
		</view>

		<view class="form-item">
			<text class="label">当前住址：</text>
			<input 
				class="input"
				placeholder="请输入当前住址"
				v-model="address"
				placeholder-class="placeholder"
			/>
		</view>

		<button class="submit-btn" @tap="setData">保存信息</button>
	</view>
</template>

<script>
	import config from '../../util/config'
	export default {
		data() {
			return {
				userId: '',
				name: '',
				sex:0,
				age: '',
				email: '',
				phone: '',
				address: '',
			}
		},
		methods: {
			radioChange(e) {
				//console.log(e)
				this.sex = parseInt(e.detail.value)
			},
			async getData() {
				try {
					const res = await uni.request({
						url: config.baseUrl+'/api/userInfo?userId='+this.userId,
						method: 'GET',
					})
					
					if (res.statusCode === 200) {
						const data = res.data.data
						this.name = data.name || ''
						this.age = data.age || ''
						this.email = data.email || ''
						this.phone = data.phone || ''
						this.address = data.address || ''
					}
				} catch (e) {
					uni.showToast({
						title: '数据获取失败',
						icon: 'none'
					})
				}
			},
			async setData() {
				if (!this.validateForm()) return
				
				try {
					const res = await uni.request({
						url: '/api/userInfo/update',
						method: 'POST',
						data: {
							userId: this.userId,
							name: this.name,
							age: this.age,
							email: this.email,
							phone: this.phone,
							address: this.address
						}
					})
					
					if (res.statusCode === 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				} catch (e) {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				}
			},
			validateForm() {
				if (!this.name) {
					uni.showToast({ title: '姓名不能为空', icon: 'none' })
					return false
				}
				if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.email)) {
					uni.showToast({ title: '邮箱格式不正确', icon: 'none' })
					return false
				}
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({ title: '手机号格式错误', icon: 'none' })
					return false
				}
				return true
			},
			validateEmail() {
				if (this.email && !this.email.includes('@')) {
					uni.showToast({ title: '邮箱格式不正确', icon: 'none' })
				}
			},
			validatePhone() {
				if (this.phone && this.phone.length !== 11) {
					uni.showToast({ title: '手机号应为11位', icon: 'none' })
				}
			}
		},
		mounted() {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.userId = userInfo.userId
				this.getData()
			} else {
				uni.showToast({ title: '请先登录', icon: 'none' })
				uni.navigateTo({ url: '/pages/login/login' })
			}
		}
	}
</script>

<style>
	.container {
		height: 100% !important;
		overflow: hidden !important;
		padding: 30rpx;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.label {
		display: block;
		font-size: 32rpx;
		margin-bottom: 20rpx;
		font-weight: 500;
	}

	.input {
		height: 80rpx;
		padding: 0 20rpx;
		border-radius: 12rpx;
		border: 1px solid #e5e5e5;
		font-size: 30rpx;
	}

	.placeholder {
		color: #999;
		font-size: 30rpx;
	}

	.submit-btn {
		margin-top: 60rpx;
		background-color: #007AFF;
		color: white;
		border-radius: 50rpx;
		font-size: 34rpx;
	}

	.submit-btn:active {
		opacity: 0.8;
	}
</style>